﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="utf-8" />
    <title>你的 ASP.NET 应用程序</title>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="http://47.93.78.8:8091/signalr/hubs"></script>
</head>
<body>
    <div>
        <div>
            名称：<p id="userName"></p>
        </div>
        房间名：<input type="text" value="ceshi" id="roomName" />
        <button id="createRoom">创建聊天室</button><br />
        房间们：<div id="RoomGroup" style="border: 1px solid"></div>
        <input type="text" value="ceshi" id="messagetext" />
        <button id="message">选择广播</button>
    </div>
    <div style="float: left; border: double">
        <div>房间列表</div>
        <ul id="roomList"></ul>
    </div>
    <div id="rooms"></div>
    <button onclick="che(-1)">归零</button>
    <input type="text" value="ceshi" id="messagetexts" />
    <button onclick="che(0)">群发推</button>
    <button onclick="che(1)">1</button>
    <button onclick="che(2)">2</button>
    <button onclick="che(3)">球队状态</button>
    <button onclick="che(4)">球员列表</button>
    <button onclick="che(5)">API5</button>
    <button onclick="che(6)">API6</button>
    <button onclick="che(7)">API7</button>
    <script>
var va = "http://47.93.78.8:8091";
        As = 0;
        Bs = 0;
        function che(n) {
            if (n == -1) {
                As = 0; Bs = 0;
                $('.textt').val('{Num:1,text:"As归零",As:"0"}');
                $('.textt').val('{Num:2,text:"Bs归零",Bs:"0"}');
            }
            if (n == 0)
                $('#messagetext').val('{Num:' + n + ',text:"' + $("#messagetexts").val() + '",href:"www.baidu.com"}');
            if (n == 1)
                $('.textt').val('{Num:' + n + ',text:"As+1分",As:"' + (++As) + '"}');
            if (n == 2)
                $('.textt').val('{Num:' + n + ',text:"Bs+1分",Bs:"' + (++Bs) + '"}');
            if (n == 3)
                $('.textt').val('{Num:' + n + ',text:"球队数据怼入成功",teams:[{teamname:"T1",teamid:"1",logo:"1.png",sc:"0"},{teamname:"T2",teamid:"2",logo:"1.png",sc:"0"}]}');
            if (n == 4) {
                var players = '{name:"As1",team:"1",code:"1"},{name:"As1",team:"2",code:"1"}';
                for (var i = 2; i < 6; i++) {
                    players += ',{name:"As' + i + '",team:"1",code:"' + i + '"}';
                    players += ',{name:"As' + i + '",team:"2",code:"' + i + '"}';
                }
                $('.textt').val('{Num:' + n + ',text:"球员列表怼入成功",players:[' + players + ']}');
            }
            if (n == 5) {
                //var baseUrl = "http://localhost:19042/api/CompetitionData/getScreenData";
                //var json = {};
                //$.post(baseUrl, json, function (data) {
                //    alert(data);

                //});
                BingScore(va +"/api/CompetitionData/getScreenData");
            }
            if (n == 6) {
                BingScore(va +"/api/CompetitionData/UpdateScreenData");
            }
            if (n == 7) {
                BingScore(va +"/api/GetData/getAddPlayerList");
            }
        }
        var chat;
        var roomCount = 0;

        function BingScore(n) {
            jQuery.support.cors = true;
            var baseUrl = va +"/api/CompetitionData/UpdateScreenData";
            var json = {};
            $.post(n, json, function (data) {
                //$("#roomName").text(data);
                //var dataObj = eval("(" + data + ")");

                alert(data);
            });
        }
        $(function () {
            //获取用户名称
            $("#userName").html(prompt('请输入您的名称:', ''));

            //var conn = $.hubConnection("http://localhost:19042/signalr");
            var conn = $.hubConnection(va +"/signalr");
            conn.qs = { "clientName": $("#userName").html() };
            //chat = $.connection.groupHub;
            //调用hub中注册的showMessage方法

            conn.start().done(function () {
                $("#createRoom").click(function () {
                    if (roomCount < 2) {
                        chat.invoke("createRoom", $("#roomName").val());
                    }
                    else {
                        alert("聊天窗口只允许有2个");
                    }
                })
            });
            var chat = conn.createHubProxy("SCompetitionHub");
            //注册查询房间列表的方法
            chat.on("getRoomList", function (data) {

                if (data) {
                    //debugger
                    var jsonData = $.parseJSON(data);
                    $("#roomList").html(" ");
                    for (var i = 0; i < jsonData.length; i++) {
                        var html = '<li>房间名:' + jsonData[i] + '<button roomName="' + jsonData[i] + '" class="addRoom">加入</button> </li>';
                        $("#roomList").append(html);
                        var htmls = '<label><input type="checkbox" value="' + jsonData[i] + '" />房间名:' + jsonData[i] + '</label>';
                        $("#RoomGroup").append(htmls);
                    }
                }
            });
            //调用hub中addRoom 加入房间的方法
            chat.on("addRoom", function (roomName) {
                var html = '<div style="float:left; margin-left:30px; border:double" class="room" id="' + roomName + '" roomname="' + roomName + '" ><button class="removeRoom">退出房间</button> \  ' + roomName + '房间聊天记录如下:<ul></ul> <input class="textt" type="text"/> <button class="send">发送</button><div>'
                $("#rooms").append(html);
            });

            chat.on("showMessage", function (message) {
                alert(message);
            });
            //调用hub中注册的sendMessage 方法
            chat.on("sendMessage", function (roomname, message) {
                //debugger
                $("#" + roomname).find("ul").each(function () {
                    $(this).append('<li>' + message + '</li>');
                })
            });
            //调用hub中注册的sendMessages 方法
            chat.on("sendMessages", function (message) {
                $(".room").find("ul").each(function () {
                    $(this).append('<li>' + message + '</li>');
                })
            });
            //调用hub中removeRoom 退出房间方法
            chat.on("removeRoom", function (data) {
                alert(data);
            });

            //发送消息的方法
            $(".send").live("click", function () {

                var message = $(this).prev().val();
                var room = $(this).parent();
                var userName = $("#userName").html();
                //message = userName + ":" + message;
                message = message;
                var roomName = $(room).attr("roomName");
                chat.invoke("sendMsg", roomName, message);
            });
            //退出房间
            $(".removeRoom").live("click", function () {
                var room = $(this).parent();
                var roomName = $(room).attr("roomName");
                chat.invoke("exitRoom", roomName);
                room.remove();
            });
            //加入房间
            $(".addRoom").live("click", function () {
                var data = $(this).attr("roomName");
                chat.invoke("addRoom", data);
            });
        });


    </script>
</body>
</html>
